<!DOCTYPE html>
<html  xmlns:th = "http://www.thymeleaf.org">
<head>
    <title>Layui 后台布局</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" media="all"/>
    <link th:href="@{/css/style.css}" rel="stylesheet" media="all"/>
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台管理</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" >
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item  layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="site-demo-active" data-url="http://www.baidu.com" data-id="baidu" data-title="百度">列表一</a></dd>
                        <dd><a href="javascript:;" class="site-demo-active" data-url="https://www.sina.com.cn/" data-id="sina" data-title="新浪">列表二</a></dd>
                        <dd><a href="javascript:;" >列表三</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>




    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!--
            layui-tab-brief 设定简洁风格
            layui-tab-card 设定卡片风格
        -->
       <!-- <div class="layui-tab layui-tab-brief" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" >标题一</li>
                <li>标题二</li>
                <li>标题三</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="userlist"  lay-filter="test1"></table>
                </div>
                <div class="layui-tab-item">
                    内容2
                </div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>-->

        <!-- 页面标签 -->
        <div class="layui-navtabs">
            <div class="layui-icon layui-navtabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layui-navtabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layui-navtabs-control layui-icon-down">
                <ul class="layui-nav layui-navtabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                            <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                            <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-allowClose="true" lay-filter="tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li lay-id="home/console.html"  class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>


        </div>

        <div class="layui-tab-content" id="LAY_app_body">

        </div>
        <!--<div class="layui-tab-content">
            <div class="layadmin-tabsbody-item layui-show">
                <iframe th:replace="home::html" frameborder="0" class="layadmin-iframe">

                </iframe>

                &lt;!&ndash;<table class="layui-hide" id="userlist"  lay-filter="test1"></table>&ndash;&gt;

            </div>
        </div> -->
        </div>
    </div>

    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script id="useFlagTpl" type="text/html">
        {{# if(d.useFlag === 'Y'){ }}
            <span>{{ '正常' }}</span>
        {{# } else { }}
            {{ '停用' }}
        {{# } }}
    </script>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<!-- 提示：如果是采用非模块化方式，此处可换成：layui.all.js -->
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    //如果内置的模块本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
    layui.use(['element', 'layer', 'table'], function(){
        var element = layui.element;  //元素操作
        var layer = layui.layer;  //弹层
        var table = layui.table;  //表格
        var $ = layui.$;  ////由于layer弹层依赖jQuery，所以可以直接得到， 重点处。

        //向世界问个好
        //layer.msg('Hello World');

        //触发事件
        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function(url,id,name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分

                element.tabAdd('tabs', {
                    title: name,
                    id: id //规定好的id
                });

                $('#LAY_app_body').append(['<div class="layadmin-tabsbody-item layui-show">', '<iframe src="' + url + '" frameborder="0" class="layadmin-iframe"></iframe>', "</div>"].join(""))
            },
            tabChange: function(id) {
                //切换到指定Tab项
                element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("tabs", id);//删除
            }
        };

        //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $('.site-demo-active').on('click', function() {

            var dataid = $(this);

            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在

                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });


        table.render({
            elem: '#userlist',
            // height: 312,   //默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条
            //height: 'full-100', //高度最大化减去差值
            url: '/user/list',
            toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            },
            page: true,  //开启分页
            limits:[10,20,30,40,50], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
            cols: [ //表头
                        [
                            {type: 'checkbox', fixed: 'left'},  //fixed  left：固定在左 right：固定在右， 一旦设定不随滚动条滚动而滚动
                            {field:'uid', title:'uid', sort: true, fixed: 'left'}, //hide 表示隐藏列
                            {field:'userName', title:'用户编码', sort:true, unresize: true}, //unresize 是否禁用拖拽列宽
                            {field:'realName', title:'用户名', sort:true, edit:'text'}, //edit 单元格编辑类型（默认不开启）目前只支持：text（输入框）
                            {field:'email', title:'邮箱', sort:true},
                            {field:'phone', title:'联系方式', sort:true},
                            {field:'birthday', title:'出生日期', sort:true},
                            {field:'useFlag', title:'使用状态', sort:true, templet: '#useFlagTpl'},
                            {field:'createTime', title:'创建时间', sort:true},
                            {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                        ]
                    ],
            text: {  //设置无数据是提示信息
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            skin: 'line', //行边框风格   row 列边框风格  nob 无边框风格
            even: true, //开启隔行背景  false 关闭隔行背景
            size: 'sm' //小尺寸的表格   lg 大尺寸表格
        });

        //监听头工具栏事件
        table.on('toolbar(test1)', function(obj){
            console.log(obj.event);
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据 ,  data类型为数组，可以通过JSON.stringify(data)转化后查看

            switch(obj.event){
                case 'add':
                    $.post('/user/create',null, function(res){
                        if(res.uid){
                            layer.msg('用户创建成功！');

                            //执行重载
                            tbreload();
                        }
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].uid);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        //layer.msg(JSON.stringify(data));
                        var uids = new Array(data.length);
                        for(var i = 0; i < data.length; i++){
                            uids[i] = data[i].uid;
                        }

                        $.post('/user/del', {'uids': uids}, function (res) {
                            if(res){
                                layer.msg('删除成功！');
                                //执行重载
                                tbreload();
                            }
                        });
                    }
                    break;
            };
        });

        //监听工具条
        table.on('tool(test1)',function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data, //获取当前行数据
            layEvent = obj.event; //获取lay-event对应的值
           // var tr = obj.tr; //获取当前行tr的DOM对象
            //layer.msg('test');
            if(layEvent === 'look'){
                layer.msg('查看');
            }else if(layEvent === 'edit'){
                layer.msg('编辑');
            }else{
                var uids = new Array(1);
                uids[0] = data.uid;
                $.post('/user/del', {'uids':uids}, function (res) {
                    if(res){
                        layer.msg('删除成功！');
                        //执行重载
                        tbreload();
                    }
                });
            }
        });

        //监听单元格编辑
        table.on('edit(test1)',function (obj) {
            var value = obj.value;  //获取修改后的值
            var data = obj.data;  //获取所在行所有键值
            var field = obj.field;  //获取修改的字段
            var data1 = JSON.stringify(data);

            layer.msg(typeof(data));

            $.post('/user/update', data, function (res) {
                if(res){
                    layer.msg('用户更新成功！');

                    tbreload();
                }
            });
            
        });

        function tbreload(){
            //执行重载
            table.reload('userlist',{
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

    });

</script>

</body>
</html>